<template>
  <a-row :gutter="16">
    <a-col :span="4">
      <Left :selectedWxid="props.currentWxid" />
    </a-col>
    <a-col :span="4">
       <GroupAddFriend :selectedWxid="props.currentWxid" :selectedAvatar="props.selectedAvatar" @handleGroupFriendTask="handleGroupFriendTask"/>
    </a-col>
    <a-col :span="16">
      <Tasktable ref="frendlistRef" :selectedWxid="props.currentWxid"/>
    </a-col>
  </a-row>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Left from './group-add-left.vue';
  import GroupAddFriend from './group-add-friend.vue';
  import Tasktable from './group-add-tasktable.vue';

  const props = defineProps<{
    currentWxid: string;
    selectedAvatar: string;
  }>();
  const frendlistRef = ref();
  const handleGroupFriendTask = (data:any) => {
    // 调用子组件方法
    if (frendlistRef.value && frendlistRef.value.handleForm1Submit) {
        frendlistRef.value.handleForm1Submit(data);
    }
  };
</script>
